<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>视频管理</title>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <style type="text/css">
        .layui-table-cell {
            height: 100%;
            max-width: 100%;
        }
    </style>
</head>
<body>

<form class="layui-form">
    <div class="layui-inline">
        <div class="layui-input-inline">
            <input type="text" id="username" style="width: 330px" name="username" lay-verify="required" placeholder="请输入用户账号" autocomplete="off" class="layui-input">
        </div>
    </div>
    <button type="button" class="layui-btn" id="search">搜索</button>
</form>

<table id="fileTable" lay-filter="fileTable"></table>



<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">


    layui.use(['table','form','layer'],function () {

        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        table.render({
            elem:'#fileTable'
            ,url:'cloud-video/list'
            ,where: {
                ban : 0
            }
            ,page:true
            ,limit:10
            ,limits:[10,20,30,40]
            ,cols:[[
                {field:'id',title:'编号',sort:true,width:80,align:'center'}
                ,{field:'username',title:'账号',align:'center'}
                ,{field:'videoName',title:'视频名称',align:'center'}
                ,{field:'videoImg',title:'封面图片',align:'center',templet:function (d) {
                        return "<img src='"+d.videoImg+"' height='50'/>";
                    }}
                ,{field:'videoUrl',title:'视频预览',align:'center',templet:function (d) {
                        return "<video src='"+d.videoUrl+"' width='120' height='90' controls/>";
                    },width:150}
                ,{field:'videoDownload',title:'下载次数',align:'center',width:100}
                ,{field:'videoByte',title:'字节数量',align:'center'}
                ,{field:'videoSize',title:'视频大小',align:'center'}
                ,{field:'videoTime',title:'上传时间',align:'center'}
                ,{field:'deleted',title:'视频状态',align:'center',templet:function (d) {
                        if (d.deleted == 0) {
                            return "正常";
                        }else if (d.deleted == 1) {
                            return "已删除";
                        }else if (d.deleted == 2) {
                            return "彻底删除";
                        }
                    }}
                ,{toolbar: '#barDemo', align:'center'}
            ]]
        });
        /**
         * 监听事件
         * */
        table.on('tool(fileTable)',function (obj) {
            var data = obj.data;
            //封禁按钮的单击事件
            if(obj.event=='ban'){
                layer.confirm("你确定要封禁视频吗",{icon:'3',title:'提示'},function () {
                    $.ajax({
                        url:'cloud-video/ban',
                        data:{fileId:data.id},
                        type:"put",
                        dataType:"json",
                        success:function (result) {
                            if(result.code==200){
                                table.reload("fileTable",{
                                    page:{
                                        curr:1
                                    }
                                });
                                layer.msg("封禁视频成功！",{icon:'1',title:'提示'});
                            }
                        }
                    });
                })
            }
        });


        /**
         * 搜索功能
         * */
        $("#search").click(function () {
            if($("#username").val() == ""){
                table.reload("fileTable",{
                    url:'cloud-video/list',
                    page:{
                        curr:1
                    },
                    where:{
                        username:null,
                        ban:0
                    }
                });
            }else{
                table.reload("fileTable",{
                    url:'cloud-video/list',
                    where:{
                        username:$("#username").val(),
                        ban:0
                    }
                });
            }
        });


    });
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="ban">封禁</a>
</script>

</body>
</html>